<template>
    <div class="form-info">
        <div class="body">
            <div 
            v-for="(item, index) in formList"
            :key="index"
            class="item"
            >
                <div class="label">
                    {{item.label_name}}

                    <div v-if="item.reason" class="reason">
                        {{item.reason}}
                    </div>
                </div>

                <div class="value">
                    <template v-if="item.label_type === 'input'">
                        <el-input size="small" v-model="item.label_value"></el-input>
                    </template>

                    <template v-if="item.label_type === 'file'">
                        <!-- <my-upload :file-guid="item.label_value" single></my-upload> -->

                        <dialog-upload 
                                :fileguid="item.label_value"
                                :name="item.label_name"
                                :example="item.examplevalue"
                                :template="item.templatevalue"
                            ></dialog-upload>
                    </template>
                </div>
            </div>
        </div>

        <div class="footer">
            <el-button 
            type="primary" 
            size="large"
            @click="submitHandler"
            >
                提交
            </el-button>
        </div>
    </div>
</template>


<script>
import DialogUpload from '../../../components/dialog-upload.vue';

export default {
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            formList: [],
        };
    },
    components:{DialogUpload},
    methods: {
        submitHandler() {
            // allcustom/caedit.json -> allcustom/biddingedit.json
            this.$post(`${this.$store.state.api.webUrl}/allcustom/biddingedit.json`, this.formList, data => {
                this.$emit('close');
            }, true);
        },
        initForm() {
            this.$get(`${this.$store.state.api.webUrl}/allcustom/detail.json`, {
                guid: this.data.guid,
            }, data => {
                this.formList = data;
            });
        },
    },
    mounted() {
        this.initForm();
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';
    .form-info{
        display: flex;
        flex-direction: column;

        .body{
            flex: 1;

            .item{
                display: flex;
                align-items: center;

                .label{
                    margin-right: 12px;
                    min-width: 70px;

                    .reason{
                        font-size: 12px;
                        color: #909399;
                    }
                }

                .value {
                    flex: 1;
                }

                & + .item{
                    margin-top: 15px;
                }
            }
        }

        .footer{
            text-align: center;
            margin-top: 20px;
        }
    }
</style>